<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<!-- 搜索与添加区域 -->
			<el-row :gutter=20>
				<el-col :span="7">
					<el-input placeholder="请输入内容" class="input-with-select" v-model='queryInfo.query' clearable
						@clear="getUserList()">
						<el-button slot="append" icon="el-icon-search" @click="getUserList()"></el-button>
					</el-input>
				</el-col>
				<!-- <el-col :span="4">
					<el-button type="primary" @click="addialogVisible = true">添加用户</el-button>
				</el-col> -->
			</el-row>
			<el-table :data="userlist" border stripe>
				<el-table-column label="#" type="index"></el-table-column>
				<el-table-column label="用户名" prop="username"></el-table-column>
				<el-table-column label="密码" prop="password"></el-table-column>
				<el-table-column label="权限" prop="type"></el-table-column>

				<el-table-column label="操作" width="180">
					<template slot-scope='scope'>
					
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="deleUser(scope)"></el-button>
						<el-tooltip effect="dark" content="查看详情" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="mini" @click="findUser(scope)">
							</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>

		<!-- 对话框 -->
		<!-- <el-dialog title="添加用户" :visible.sync="addialogVisible" width="50%">
			<el-form :model="addFrom" :rules="addFormrules" ref="addFormref" label-width="70px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addFrom.username"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addialogVisible = false">确 定</el-button>
			</span>
		</el-dialog> -->
		<!-- 用户详情 -->
		<el-dialog title="用户详情" :visible.sync="lookVosoble" width="50%">
			<div id="app">
				<div><span>姓名:{{user.name}}</span>
					<span> 用户名:{{user.username}}</span>
				</div>
				<div>
					<span> 电话:{{user.tele}}</span>
				</div>
				<span> 卡号:{{user.cardid}}</span>
				<div>身份证号：{{user.idcard}}</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="lookVosoble = false">取 消</el-button>
				<el-button type="primary" @click="lookVosoble = false">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 获取用户列表的参数对象
				user: [],
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 2
				},
				lookVosoble: false,
				userlist: [],
				total: 0,
				addialogVisible: false,
				// 添加用户的表单数据
				addFrom: {
					username: ''
				},
				//添加表单的验证规则
				addFormrules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}, {
						min: 3,
						max: 10,
						message: '用户名长度在3到10位',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			findUser(scope) {
				this.lookVosoble = true;
				console.log(scope.row.username);
				let users = scope.row.username;
				this.$http.get("http://localhost:8989/main/find", {
					params: {
						username: users,

					}
				}).then(res => {
					console.log(res.data);
					if (res.status === 200) {

						this.$message.success("查找成功");
						this.user = res.data.data;
					} else {
						this.$message.error("查找失败");
					}
				}).catch(e => {
					console.log(e);
				})

			},
			deleUser(scope) {
				this.$http.post("http://localhost:8989/deleuser", scope.row).then(res => {
					console.log(res);
					if (res.data.status != 0) {
						this.$message.success("删除成功");
						this.getUserList();
					} else {
						this.$message.error("删除失败");
					}
				}).catch(e => {
					console.log(e);
				})
			},
			getUserList() {
				this.$http.post("http://localhost:8989/finduser", this.queryInfo).then(res => {
					console.log(res);
					if (res.data.status !== 200) return this.$message.error("获取用户列表失败");
					this.userlist = res.data.data.list;
					console.log(this.userlist);
					this.total = res.data.total;
				}).catch(e => {
					console.log(e);
				})
			},
			handleSizeChange(newSize) {
				console.log(newSize);
				this.queryInfo.pagesize = newSize;
				this.getUserList();
			},
			handleCurrentChange(newPage) {
				console.log(newPage);
				this.queryInfo.pagenum = newPage;
				this.getUserList();
			},
			// 监听状态的改变
			userStateChangee(userinfo) {
				console.log(userinfo);
				this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`).then(res => {
					console.log(res);
					if (res.data.meta.status !== 200) {
						userinfo.mg_state = !userinfo.mg_state;
						return this.$message.error('更新用户状态失败');
					}
					this.$message.success('更新用户状态成功');
				});
			}
		},
		created() {
			this.getUserList();
		}

	}
</script>

<style scoped>
</style>
